<template>
  <div class="news-detail">
    <div
      v-if="device === 'desktop' || device === 'ipad'"
      class="dswd-container"
    >
      <div v-loading="loadingNews" element-loading-text="新闻加载中……" class="news-wrap">
        <div class="news-img">
          <draw-img v-if="showImage" class="img-wrap" :relative-id="newsInfo.newid" />
          <!-- <img :src="newsInfo.linkUrl" alt="item.title"> -->
        </div>
        <div class="news-content">
          <div class="news-title">{{ newsInfo.title }}</div>
          <div class="news-auth-time">
            {{ newsInfo.author }} | {{ newsInfo.updateTime | timeDiff }}
          </div>
          <div class="news-text" v-html="newsInfo.content" />
        </div>
      </div>
    </div>
    <div v-if="device === 'mobile'" v-loading="loadingNews" element-loading-text="新闻加载中……" class="dswd-m-container">
      <div class="news-wrap">
        <div class="news-img">
          <draw-img v-if="showImage" class="img-wrap" :relative-id="newsInfo.newid" />
          <!-- <img :src="newsInfo.linkUrl" alt="item.title"> -->
        </div>
        <div class="news-content">
          <div class="news-title">{{ newsInfo.title }}</div>
          <div class="news-auth-time">
            {{ newsInfo.author }} | {{ newsInfo.updateTime | timeDiff }}
          </div>
          <div class="news-text" v-html="newsInfo.content" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import drawImg from '@/components/Drawimg'
export default {
  components: { drawImg },
  data() {
    return {
      showImage: false,
      loadingNews: true,
      newsInfo: {}
    }
  },
  props: {
    rootNews: {
      type: Object,
      default: () => {}
    }
  },
  filters: {
    timeDiff(time) {
      let resultValue = ''
      if (time !== null && time !== '') {
        const hours = moment
          .duration(moment() - moment(time), 'ms')
          .get('hours')
        resultValue = hours + '小时之前'
      }
      return resultValue
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  mounted() {
    this.getNews()
  },
  methods: {
    getNews() {
      this.$api.news
        .selectNewsById({
          newid: this.rootNews.newid
        })
        .then((res) => {
          if (res.code === 200) {
            this.newsInfo = res.data
            setTimeout(() => {
              this.loadingNews = false
              this.showImage = true
            })
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.news-detail {
  .dswd-container {
    padding-top: 40px;
    background: #f8f8f8;
    .news-wrap {
      max-width: 1000px;
      width: 100%;
      margin: auto;
      box-sizing: border-box;
      .news-img {
        img {
          width: 100%;
          vertical-align: middle;
        }
      }
      .news-content {
        margin-top: 40px;
        margin-bottom: 40px;
        background: #ffffff;
        padding: 40px;
        .news-title {
          font-size: 30px;
          font-weight: 500;
          color: #222222;
          line-height: 34px;
          text-align: center;
        }
        .news-auth-time {
          margin-top: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
          text-align: right;
        }
        .news-text {
          margin-top: 38px;
          font-size: 20px;
          font-weight: 400;
          color: #222222;
          line-height: 34px;
        }
      }
    }
  }
  .dswd-m-container {
    .news-wrap {
      background: #f8f8f8;
      padding-top: 40px;
      .news-img {
        img {
          width: 100%;
          vertical-align: middle;
        }
      }
      .news-content {
        margin-top: 20px;
        margin-bottom: 20px;
        background: #ffffff;
        padding: 20px;
        .news-title {
          font-size: 20px;
          font-weight: 500;
          color: #222222;
          line-height: 30px;
        }
        .news-auth-time {
          margin-top: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 20px;
        }
        .news-text {
          margin-top: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #222222;
          line-height: 28px;
        }
      }
    }
  }
}
</style>
<style>
.news-text img{
  width: 75%;
  margin: auto;
}
</style>
